<div *ngFor="let question of questions" inViewport (inViewportAction)="loadQuestion($event, question)">
  <div *tmIsLoading="question.isLoading && !question.errorMessage"></div>
  <tm-loading-retry
            [shouldShowRetry]="!!question.errorMessage"
            [message]="question.errorMessage"
            (retryEvent)="loadQuestionResults(question)"
  >
    <div id="question-{{ question.feedbackQuestion.questionNumber }}-responses" class="card bg-light mt-4" *ngIf="question.hasResponse">
      <div class="card-body">
        <tm-question-text-with-info [questionNumber]="question.feedbackQuestion.questionNumber" [questionDetails]="question.feedbackQuestion.questionDetails" class="question-text-with-info"></tm-question-text-with-info>
        <div class="all-responses" *ngIf="!question.hasResponseButNotVisibleForPreview, else nonViewableForPreview">
          <div *ngIf="question.hasCommentNotVisibleForPreview" class="alert alert-warning my-3 non-visible-comment-alert" role="alert">
            <i class="fas fa-eye-slash"></i> Some comments (on responses) received for this question are omitted from this preview because they are not visible to instructors, as per their visibility settings.
          </div>
          <div class="other-responses" *ngIf="canUserSeeResponses(question), else nonViewableResponse">
            <tm-single-statistics [question]="question.feedbackQuestion.questionDetails"
                                  [responses]="question.allResponses"
                                  [statistics]="question.questionStatistics"
                                  [isStudent]="true"></tm-single-statistics>
            <div *ngIf="RESPONSE_HIDDEN_QUESTIONS.includes(question.feedbackQuestion.questionType), else dontShowAdditionalMsg">
              <p style="color: gray; font-size: small;"><i class="fas fa-info-circle" style="color: #087CFC;"></i> Individual Responses are not configured to be shown for this question type.</p>
            </div>
            <ng-template #dontShowAdditionalMsg>
              <tm-student-view-responses *ngIf="question.responsesToSelf.length" [responses]="question.responsesToSelf" [feedbackQuestion]="question.feedbackQuestion" [timezone]="session.timeZone" [statistics]="question.questionStatistics"></tm-student-view-responses>
              <div *ngFor="let responsesForOtherRecipient of question.otherResponses">
                <tm-student-view-responses *ngIf="responsesForOtherRecipient.length" [responses]="responsesForOtherRecipient" [feedbackQuestion]="question.feedbackQuestion" [timezone]="session.timeZone" [statistics]="question.questionStatistics"></tm-student-view-responses>
              </div>
              <div class="other-response" *ngIf="!question.otherResponses.length && !question.responsesToSelf.length">
                <strong>Other responses (to you): </strong>No responses received yet.
              </div>
            </ng-template>
          </div>
          <ng-template #nonViewableResponse>
            <div class="other-response">
              <strong>Other responses (to you): </strong>Responses are not visible to you.
            </div>
          </ng-template>
          <div class="given-responses mt-4" *ngIf="question.responsesFromSelf.length">
            <strong>Your own responses (to others):</strong>
            <div *ngFor="let responseFromSelf of question.responsesFromSelf">
              <tm-student-view-responses [responses]="[responseFromSelf]" [isSelfResponses]="true" [feedbackQuestion]="question.feedbackQuestion" [timezone]="session.timeZone" [statistics]="question.questionStatistics"></tm-student-view-responses>
            </div>
          </div>
        </div>
        <ng-template #nonViewableForPreview>
          <div class="alert alert-warning other-response non-visible-response-alert" role="alert">
            <i class="fas fa-eye-slash"></i> Responses received for this question are omitted from this preview because some or all parts of them are not visible to instructors, as per their visibility settings.
          </div>
        </ng-template>
      </div>
    </div>
  </tm-loading-retry>
</div>
